<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background-color: #f1f2f4;
        color: #304156;
        font-size: 30px;
      }
      /*  内容展示区域 */
      .content {
        overflow: auto;
        padding: 30px 0 0 0;
        text-align: center;
      }
      /* 向下图标 */
      .content > .next {
        height: 28px;
        position: relative;
      }
      .content > .next > img{
        position: absolute;
        top: -8px;
        left: calc( 50% - 21px);
      }
      .lineOne {
        width: 100%;
        border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
      }
      /* 乡音登陆 */
      .loading {
        margin: 10px 30px;
        background-color: white;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px;
        padding: 16px 0;
      }

      /* 后台数据 */
      .include {
        margin: 10px 30px;
      }
      .include > .BackgroundData {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .include > .BackgroundData > .back {
        width: 18%;
        background-color: white;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px;
        padding: 16px 0;
      }
      /* 村名状态 */
      .include > .BackgroundData > .statu {
        width: calc(82% - 30px);
        background-color: white;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px;
        padding: 16px 0;
      }
      .include > .BackgroundData > .icon {
        margin-top: 30px;
        width: 18%;
        background-color: white;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px;
      }
      .include > .BackgroundData > .icon > .juzhong{
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
				align-content: center;
        justify-content: center;
        
      }
      .include > .BackgroundData > .icon > .juzhong > div{
        color: #3f7eff;
      }
      .include > .BackgroundData > .icon > .juzhong > img{
        width: 71%;
      }
      .include > .BackgroundData > .method {
        margin-top: 30px;
        width: calc((82% - 90px)/3);
        border-radius: 2px;
        background-color: rgba(248, 248, 248, 0.6);
        border: 1px solid rgba(112, 112, 112, 0.2);
      }
      .include > .BackgroundData > .method > .head {
        width: 100%;
        background-color: #304156;
        color: #ffffff;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px 2px 0 0;
        padding: 10px 0;
      }
      .include > .BackgroundData > .method > .text {
        margin: 22px auto;
        font-size: 20px;
        width: 86%;
        color: #3f7eff;
        background-color: #ffffff;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px;
        padding: 10px 0;
      }
      /* 信息种类 */
      .kind {
        margin: 10px 30px;
      }
      .kind > .BackgroundData {
        display: flex;
        justify-content: space-between;
      }
      .kind > .BackgroundData > .type {
        width: 18%;
        background-color: white;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px;
        font-size: 24px;
        padding: 10px 0;
      }
      /* 上传结束 */
      .over {
        margin: 10px 30px;
        background-color: white;
        box-shadow: 0 5px 5px rgba(49, 116, 200, 0.06);
        border-radius: 2px;
        padding: 16px 0;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <!-- 内容展示区域 -->
      <div class="content">
        <div class="lineOne"></div>
        <!-- 乡音登陆 -->
        <div class="loading">
          <span>登录乡音</span>
        </div>
        <div class="lineOne"></div>
        <!-- 向下图标 -->
        <div class="next">
          <img src="./组 6.png" alt="">
        </div>
        <div class="lineOne"></div>
        <!-- 后台数据 -->
        <div class="include">
          <div class="BackgroundData">
            <span class="back">
              <span>后台数据</span>
            </span>
            <span class="statu">
              <span>村名状态——绿色(信息完善)、黄色(信息缺失)、灰色(村子未创建)</span>
            </span>
            <span class="icon">
              <div class="juzhong">
                  <img src="./NoPath - 副本 (83).png" alt="">
                  <div>完善数据</div>
              </div>
            </span>
            <!-- 搜索村子 -->
            <span class="method">
              <div class="head">搜索村子</div>
              <div class="text">搜索框输入目标村子名</div>
              <div class="text">列表展示结果</div>
              <div class="text">点击完善信息</div>
              <div class="text">上传对应信息</div>
            </span>
            <span class="method">
              <div class="head">新增村子</div>
              <div class="text">点击新增村子</div>
              <div class="text">左侧列表展示所有村子</div>
              <div class="text">点击需完善的村子名</div>
              <div class="text">上传对应信息</div>
            </span>
            <span class="method">
              <div class="head">批量导入</div>
              <div class="text">点击导入信息</div>
              <div class="text">选择导入类型</div>
              <div class="text">下载导入文件模板</div>
              <div class="text">修改后上传信息</div>
            </span>
          </div>
        </div>
        <div class="lineOne"></div>
        <!-- 向下图标 -->
        <div class="next">
          <img src="./组 6.png" alt="">
        </div>
        <div class="lineOne" ></div>
        <!-- 信息类型 -->
        <div class="kind">
          <div class="BackgroundData">
            <span class="type">
              <span>村庄简介</span>
            </span>
            <span class="type">
              <span>特色美食</span>
            </span>
            <span class="type">
              <span>景点信息</span>
            </span>
            <span class="type">
              <span>土特产</span>
            </span>
            <span class="type">
              <span>特色民宿</span>
            </span>
          </div>
        </div>
        <div class="lineOne"></div>
        <!-- 向下图标 -->
        <div class="next">
          <img src="./组 6.png" alt="">
        </div>
        <div class="lineOne" ></div>
        <!-- 上传结束 -->
        <div class="over">
          <span>上传完成</span>
        </div>
        <div class="lineOne"></div>
      </div>
    </div>
  </body>
</html>
